<template>
  <div id="detailView" class="main">
    <!-- 内容 -->
    <div class="contaier">
      <collegeIntro :collegeData="collegeData" />
      <div style="display: flex">
        <div class="left" style="flex: 1">
          <!-- 院校风采 -->
          <div class="college-img-box">
            <mytitle
              :titleName="'院校风采'"
              :isMore="true"
              :type="1"
              :skipRou="{
                collegecode: reqData.code,
                url: '/college/collegeimgs',
              }"
            />
            <div
              class="df"
              style="justify-content: space-between"
              @click="handleImg"
            >
              <div
                class="imgs-box"
                v-for="img in collegeImgs.slice(0, 4)"
                :key="img.url"
              >
                <img :src="img.url" alt="" class="imgs" />
                <div style="text-align: center" class="img-description curr">
                  {{ img.description }}
                </div>
              </div>
            </div>
            <div v-if="!collegeImgs.length">暂无数据</div>
          </div>

          <!-- 招生简章 -->
          <div class="enrollment-guide" style="color: #666">
            <mytitle
              :titleName="'招生简章'"
              :isMore="true"
              :type="1"
              :skipRou="{
                collegecode: reqData.code,
                url: '/college/admissionsguide',
              }"
            />
            <div v-for="item in schoolZSData" :key="item.strId" class="f14">
              <div
                style="
                  border-bottom: 1px solid #f2f2f2;
                  line-height: 50px;
                  justify-content: space-between;
                "
                class="df curr"
              >
                <div
                  style="flex: 1"
                  class="zsjzItem"
                  @click="handleLookDet(item)"
                >
                  {{ item.title }}
                </div>
                <div style="flex: 1; text-align: center">
                  浏览{{ item.hits }}
                </div>
                <div>
                  {{ item.createdAt.match(/^\d{4}-\d{2}-\d{2}/)[0] }}
                </div>
              </div>
            </div>
          </div>

          <!-- 双一流学科 -->
          <div>
            <mytitle :titleName="'双一流学科'" :isMore="false" />
            <el-select
              class="select-box"
              v-model="optValue"
              size="small"
              style="width: 80px"
              @change="handleChange"
            >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
            <div>
              <!-- class="syltable" -->
              <el-table
                empty-text="暂无数据"
                :data="shaungyiliuInfo"
                style="width: 100%"
                :header-cell-style="{
                  backgroundColor: '#f5f5f5',
                  height: '64px',
                  color: '#333',
                  'font-weight': '500',
                  'text-align': 'center',
                }"
                :cell-style="{ height: '48px' }"
                border
                :span-method="spanMethod"
              >
                <el-table-column label="数量" width="150" align="center">
                  <template #default>
                    <div style="margin: 0 20px">
                      {{ shaungyiliuInfo.length }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="学科">
                  <template #default>
                    <div v-for="item in shaungyiliuInfo" :key="item">
                      <div style="margin: 0 20px">{{ item.name }}</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <!-- 学科评估 -->
          <div>
            <mytitle :titleName="'学科评估'" :isMore="false" />
            <el-select
              class="select-box"
              v-model="selectZYPJtextVal"
              size="small"
              style="width: 80px"
              @change="zypjHandleChange"
            >
              <el-option
                v-for="item in selectZYPJtext"
                :key="item.extTypeId"
                :label="item.extTypeName"
                :value="item.extTypeId"
              />
            </el-select>

            <div>
              <el-table
                empty-text="暂无数据"
                class="syltable"
                :data="pinginfo"
                style="width: 100%"
                :header-cell-style="{
                  backgroundColor: '#f5f5f5',
                  height: '64px',
                  color: '#333',
                  'font-weight': '500',
                  'text-align': 'center',
                }"
                :cell-style="{ height: '48px' }"
                border
                :span-method="spanMethod"
              >
                <el-table-column label="数量" width="150" align="center">
                  <template #default>
                    {{ pinginfo.length }}
                  </template>
                </el-table-column>
                <el-table-column label="专业评级">
                  <template #default>
                    <div v-for="item in pinginfo" :key="item">
                      <div style="margin: 20px 20px 20rpx 0">
                        {{ item.name }} {{ item.level }}&nbsp;&nbsp;&nbsp;
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <!-- 特色专业 -->
          <div>
            <mytitle :titleName="'特色专业'" :isMore="false" />
            <el-table
              empty-text="暂无数据"
              class="syltable"
              :data="reseInfo"
              style="width: 100%"
              :header-cell-style="{
                backgroundColor: '#f5f5f5',
                height: '64px',
                color: '#333',
                'font-weight': '500',
                'text-align': 'center',
              }"
              :cell-style="{ height: '48px' }"
              border
            >
              <el-table-column label="专业层次" width="150" align="center">
                <template #default="scope">
                  {{ scope.row.leve }}
                </template>
              </el-table-column>
              <el-table-column label="数量" width="100">
                <template #default="scope">
                  {{ scope.row.major.length }}
                </template>
              </el-table-column>
              <el-table-column label="专业" prop="major">
                <template #default="scope">
                  <div
                    @click="handleFeatureMajor(item)"
                    v-for="item in scope.row.major"
                    :key="item.code"
                    class="curr item"
                  >
                    <div
                      style="margin: 20px 20px 20rpx 0"
                      v-if="scope.row.major.length"
                    >
                      {{ item.name || '-' }}&nbsp;&nbsp;&nbsp;
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 院系设置 -->
          <div>
            <mytitle :titleName="'院系设置'" :isMore="false" />

            <el-table
              empty-text="暂无数据"
              class="syltable"
              :data="yxmajor"
              style="width: 100%"
              :header-cell-style="{
                backgroundColor: '#f5f5f5',
                height: '64px',
                color: '#333',
                'font-weight': '500',
                'text-align': 'center',
              }"
              :cell-style="{ height: '48px' }"
              border
            >
              <el-table-column label="学院" width="250" align="center">
                <template #default="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="所含专业" prop="major">
                <template #default="scope">
                  <div
                    class="curr item"
                    v-for="item in scope.row.majors"
                    :key="item.code"
                    @click="handleMajorDet(item)"
                  >
                    <div style="margin: 20px 20px 20rpx 0">
                      <span style="padding-bottom: 40rpx"
                        >{{ item.name || '-' }}({{
                          item.level == 'ben' ? '本' : '专'
                        }})&nbsp;&nbsp;</span
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 就业报告 -->
          <div class="enrollment-guide" style="color: #666">
            <mytitle :titleName="'就业报告'" :isMore="false" />
            <div
              class="f14"
              v-for="item in jyReport"
              :key="item.webSite"
              style="border-bottom: 1px solid #f2f2f2; line-height: 50px"
            >
              <div class="curr" @click="handleReport(item)">
                <div class="zsjzItem">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-box" style="margin-left: 20px">
          <div class="right-rank">
            <mytitle :titleName="'大学排名'" :isMore="false" />
            <div class="df">
              <div
                class="ranking-item"
                v-for="(item, index) in rankingInfo"
                :key="index"
                style="text-align: center"
              >
                <div class="text-ranking-value">{{ item }}</div>
                <div class="text-ranking-title">{{ index }}</div>
              </div>
            </div>
          </div>

          <div class="right-add">
            <mytitle :titleName="'校区地址'" :isMore="false" />
            <div
              style="
                border: 1px solid rgb(204, 204, 204);
                border-radius: 4px;
                padding: 10px;
              "
              class="f14"
            >
              <div style="margin-bottom: 10px">
                <i class="iconfont icon-dizhiguanli"></i
                >{{ collegeData.cityName }}
              </div>
              <div class="df" style="margin-bottom: 10px">
                <i class="iconfont icon-dianhua3"></i>
                <div
                  v-for="item in collegeData.zhaoBanDH"
                  :key="item"
                  style="margin-right: 10px"
                >
                  {{ item }}
                </div>
              </div>
              <div
                style="margin-bottom: 10px"
                @click="openWebSite"
                class="site"
              >
                <i class="iconfont icon-guanwang"></i>{{ collegeData.webSite }}
              </div>
              <div
                style="margin-bottom: 10px"
                @click="openShuoShiWebSite"
                class="site"
              >
                <i class="iconfont icon-zaiyanboshiyanjiusheng"></i>
                {{ collegeData.shuoShiWebSite }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  getSchoolHome,
  getSchoolImgs,
  getSchoolZS,
  getSchoolSubjectEvaluate,
  getSchoolYXMajor,
  getSchoolJY,
} from '@/api/collegeDetails/collegeDetails';
import mytitle from '@/components/MyTitle';
import collegeIntro from './components/CollegeIntro';
import { ElMessage } from 'element-plus';
// 特色专业
const router = useRouter();
const route = useRoute();

const optValue = ref('');

const options = ref([]);

const shaungyiliuInfo = ref([]);

const reqData = ref({
  code: '',
});
reqData.value.code = route.query.collegecode || '';
const collegeData = ref({
  categor: '',
});
const spanMethod = ({ rowIndex }) => {
  if (rowIndex != 0) {
    return {
      rowspan: 0,
      colspan: 0,
    };
  }
};
const rankingInfo = ref({});
const reseInfo = ref([
  { leve: '国家', major: [] },
  { leve: '省级', major: [] },
]);
const handleMajorDet = (item) => {
  let level = '';
  if (item.level == 'ben') {
    level = 'benke';
    localStorage.setItem(level, 'benke');
  } else {
    level = 'zhuanke';
    localStorage.setItem(level, 'zhuanke');
  }
  router.push({
    path: '/majorLibrary/majorLibraryDet',
    query: {
      code: item.code,
      name: item.name,
      level,
    },
  });
};
const handleFeatureMajor = (item) => {
  if (item.isHasIntroduce) {
    router.push({
      path: '/majorLibrary/majorLibraryDet',
      query: {
        code: item.code,
        name: item.name,
        level: 'benke',
      },
    });
  } else {
    ElMessage('该专业暂无介绍');
  }
};
const collegeImgs = ref([]);
const handleImg = () => {
  router.push({
    path: '/college/collegeimgs',
    query: {
      collegecode: reqData.value.code,
    },
  });
};
const handleReport = (item) => {
  window.open(item.webSite);
};
const handleLookDet = (item) => {
  router.push({
    path: '/college/admissionsguide/det',
    query: { collegecode: reqData.value.code, id: item.id },
  });
};
const fetchSchoolHome = () => {
  getSchoolHome(reqData.value).then((res) => {
    if (res.data.code == 20000) {
      collegeData.value = res.data.data;
      reseInfo.value[0].major = res.data.data.featureMajor.countries;
      reseInfo.value[1].major = res.data.data.featureMajor.provinces;
      rankingInfo.value['校友会'] = res.data.data.rankingOfXYH;
      rankingInfo.value['软科'] = res.data.data.rankingOfRK;
      rankingInfo.value['QS'] = res.data.data.rankingOfQS;
      rankingInfo.value['USNews'] = res.data.data.rankingOfUSNews;
      options.value = res.data.data.sylMajor.sylEvalutions || [];
      optValue.value = res.data.data.sylMajor.sylEvalutions[0];
      shaungyiliuInfo.value =
        (res.data.data.sylMajor.sylSubjectsGroup[0] || {}).subjects || [];
      collegeData.value.categor = res.data.data?.categories[0];
    }
  });
};
const handleChange = (val) => {
  collegeData.value.sylMajor.sylSubjectsGroup.forEach((item) => {
    if (item.evaluations == val) {
      shaungyiliuInfo.value = item.subjects;
    }
  });
};
const fetchSchoolImgs = () => {
  getSchoolImgs(reqData.value).then((res) => {
    if (res.data.code == 20000) {
      collegeImgs.value = res.data.data;
    }
  });
};
const schoolZSData = ref([]);
const fetchSchoolZS = () => {
  let requestData = {
    page: 1,
    pageSize: 3,
    code: reqData.value.code,
  };
  getSchoolZS(requestData).then((res) => {
    if (res.data.code == 20000) {
      schoolZSData.value = res.data.data;
      schoolZSData.value.forEach((item) => {
        item.updatedAt = item.updatedAt.substring(
          0,
          item.updatedAt.indexOf('T'),
        );
      });
    }
  });
};
const selectZYPJtext = ref([]);
const selectZYPJtextVal = ref('');
const pinginfo = ref([]);
const fetchSchoolSubjectEvaluate = (extTypeId = '4') => {
  let requestData = {
    code: reqData.value.code,
    extTypeId,
  };
  getSchoolSubjectEvaluate(requestData).then((res) => {
    if (res.data.code == 20000) {
      selectZYPJtext.value = res.data.data.filter;
      pinginfo.value = res.data.data.data.subjectEvaluates;
      selectZYPJtextVal.value = selectZYPJtext.value.filter(
        (v) => v.extTypeId == extTypeId,
      )[0].extTypeId;
    }
  });
};
const yxmajor = ref([]);
const fetchSchoolYXMajor = () => {
  getSchoolYXMajor(reqData.value).then((res) => {
    if (res.data.code == 20000) {
      yxmajor.value = res.data.data;
    }
  });
};
const jyReport = ref([]);
const fetchSchoolJY = () => {
  let requestData = {
    page: 1,
    pageSize: 5,
    code: reqData.value.code,
  };

  getSchoolJY(requestData).then((res) => {
    if (res.data.code == 20000) {
      jyReport.value = res.data.data;
    }
  });
};
const zypjHandleChange = (val) => {
  fetchSchoolSubjectEvaluate(val);
};
const openWebSite = () => {
  window.open(collegeData.value.webSite);
};
const openShuoShiWebSite = () => {
  window.open(collegeData.value.shuoShiWebSite);
};
fetchSchoolHome();
fetchSchoolImgs();
fetchSchoolZS();
fetchSchoolSubjectEvaluate();
fetchSchoolYXMajor();
fetchSchoolJY();
</script>

<style lang="scss" scoped>
.item:hover {
  color: var(--color-text);
}
.syltable {
  :deep(.cell) {
    display: flex;
    flex-wrap: wrap;
  }
}
.contaier {
  margin-bottom: 150px;
  .right-rank {
    width: 300px;
    height: 200px;
    .ranking-item {
      width: 70px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      border-radius: 10px;
      background-color: #ffe2da;
    }
    .text-ranking-value {
      color: #ff3b0a;
      font-size: 20px;
      font-weight: bold;
    }

    .text-ranking-title {
      color: #464646;
      font-size: 12px;
    }
  }
}
.nav-box {
  border-bottom: 1px solid var(--color-text);
  .item-box {
    padding: 10px 30px;
    // border-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
}

.imgs-box {
  .imgs {
    width: 200px;
    height: 130px;
    border-radius: 4px;
    margin-bottom: 5px;
  }
}
.iconfont {
  margin-right: 20px;
  color: var(--color-text);
}
.zsjzItem:hover {
  color: var(--color-text);
}
.select-box {
  margin-bottom: 20px;
}
.activenav {
  background: var(--color-text);
  color: #fff;
}
.img-description:hover {
  color: var(--color-text);
}
.site {
  cursor: pointer;
  &:hover {
    color: var(--color-text);
  }
}
</style>
<style>
.cell {
  width: 100%;
  text-align: center;
}
</style>
